<script setup>
import { ref, nextTick, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import ChannelSelect from '@/views/article/components/ChannelSelect.vue';
import { QuillEditor } from '@vueup/vue-quill';
import { artPublishService, artEditService } from '../../../api/article';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const quillRef = ref(null);

const emit = defineEmits(['add-article', 'edit-article']);
const props = defineProps({
    options: { // 分类列表：格式为 [{id: '分类ObjectId', name: '分类名', alias: '别名'}, ...]
        type: Array,
        required: true
    },
    editData: {
        type: Object,
        default: null
    }
});

const drawer = ref(false);
const formRef = ref(null);

// 状态选项
const statusOptions = [
    { label: '待审核', value: '待审核' },
    { label: '连载', value: '连载' },
    { label: '停更', value: '停更' },
    { label: '完结', value: '完结' },
    { label: '下架', value: '下架' }
];

const defaultForm = {
    id: '', // 编辑时存储后端返回的 _id（ObjectId），添加时为空
    title: '',
    cate_id: '', // 绑定分类名称（如"短篇小说"）
    cover: '', // 可能是 File 对象（新上传）或 URL 字符串（编辑已有）
    content: '',
    state: '待审核' // 默认状态为待审核
};
const formModel = ref({ ...defaultForm });
const imageUrl = ref('');
const loading = ref(false); // 新增：防止重复提交

// 计算属性：判断是否是编辑模式
const isEditMode = computed(() => !!formModel.value.id);

// ArtcleEdit.vue 中构造FormData的函数
const convertToFormData = (obj) => {
  const formData = new FormData();
  Object.entries(obj).forEach(([key, value]) => {
    if (value !== undefined) {
      // 关键：仅当cover是File对象时才追加，否则跳过（后端复用旧封面）
      if (key === 'cover' && !(value instanceof File)) {
        return; 
      }
      formData.append(key, value);
    }
  });
  return formData;
};

const open = (row = null) => {
  drawer.value = true;
  imageUrl.value = '';
  loading.value = false; 

  if (formRef.value) {
    formRef.value.clearValidate();
  }

  nextTick(() => {
    if (row?.id) {
      console.log('编辑模式下的文章数据（含content）：', row);
      // 直接赋值转换后的HTML，依赖v-model自动更新编辑器
      formModel.value = {
        id: row.id,
        title: row.title || '',
        cate_id: row.cate_name || '',
        cover: row.cover || '',
        content: row.content || '',
        state: row.state || '待审核' // 保留原有状态，如果没有则默认为待审核
      };
      console.log('formModel.content 最终值：', formModel.value.content); 

      if (formModel.value.cover) {
        imageUrl.value = formModel.value.cover;
      }
    } else {
      formModel.value = { ...defaultForm };
      imageUrl.value = '';
    }

    const titleInput = document.querySelector('.el-drawer .el-input__inner');
    if (titleInput) titleInput.focus();
  });
};

const onSelectFile = (uploadFile) => {
    const file = uploadFile.raw;
    if (!file) return;

    const isImage = file.type.startsWith('image/');
    if (!isImage) {
        return ElMessage.error('只能上传图片文件（JPG、PNG等）');
    }

    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        return ElMessage.error('图片大小不能超过2MB');
    }

    imageUrl.value = URL.createObjectURL(file);
    formModel.value.cover = file; // 存储 File 对象（后续转 FormData）
};

const removeImage = () => {
    imageUrl.value = '';
    formModel.value.cover = '';
};

// 修复核心：完善添加/编辑逻辑（处理 FormData、必填字段、错误响应）
const onPublish = async () => {
    console.log('富文本编辑器当前内容：', formModel.value.content);
    // 1. 基础参数校验（避免空字段调用接口）
    if (!formModel.value.title) {
        return ElMessage.warning('请输入文章标题');
    }
    if (!formModel.value.cate_id) {
        return ElMessage.warning('请选择文章分类');
    }

    // 2. 获取必填的 categoryId（分类的 ObjectId，后端 Novel 模型必填）
    const matchedCate = props.options.find(
        item => item.name === formModel.value.cate_id
    );
    if (!matchedCate) {
        return ElMessage.error('所选分类不存在，请重新选择');
    }
    const categoryId = matchedCate.id; // 关键：获取分类的 ObjectId

    // 3. 构造接口需要的参数（含所有必填字段）
    const articleParams = {
        title: formModel.value.title,
        cate_name: formModel.value.cate_id, // 分类名称（前端显示用）
        categoryId: categoryId, // 分类 ObjectId（后端关联用，必填）
        state: formModel.value.state, // 使用表单中选择的状态
        pub_date: new Date().toISOString().split('T')[0], // 格式：2024-05-20
        content: formModel.value.content,
        cover: formModel.value.cover // 可能是 File 或 URL 字符串
    };
    // 编辑场景：补充 id（后端根据 id 定位要更新的数据）
    if (formModel.value.id) {
        articleParams.id = formModel.value.id;
    }

    console.log('准备发送的数据:', articleParams);
    console.log('封面文件类型:', typeof formModel.value.cover);
    console.log('封面文件详情:', formModel.value.cover);
    // 4. 转为 FormData 格式（适配后端接口要求）
    const formData = convertToFormData(articleParams);
    

    for (let [key, value] of formData.entries()) {
        console.log(`FormData[${key}]:`, value);
    }

    // 5. 调用接口（带加载状态和错误处理）
    loading.value = true;
    try {
        let res;
        if (formModel.value.id) {
            // 编辑场景：调用编辑接口
            res = await artEditService(formData);
        } else {
            // 添加场景：调用添加接口
            res = await artPublishService(formData);
        }

        // 6. 校验后端响应（必须判断 code 为 0000 才是真成功）
        if (res.data.code === '0000') {
            // 构造前端列表需要的数据（含后端返回的 id，避免前端临时 ID）
            const resultArticle = {
                id: formModel.value.id || res.data.data.id, // 编辑用原 id，添加用后端返回 id
                title: formModel.value.title,
                cate_name: formModel.value.cate_id,
                state: formModel.value.state, // 使用表单中选择的状态
                pub_date: articleParams.pub_date,
                cover: formModel.value.cover instanceof File 
                    ? URL.createObjectURL(formModel.value.cover) // 新上传图片用临时 URL
                    : formModel.value.cover, // 已有图片用原 URL
                content: formModel.value.content
            };

            // 7. 通知父组件更新列表
            if (formModel.value.id) {
                emit('edit-article', resultArticle);
                ElMessage.success('保存成功');
            } else {
                emit('add-article', resultArticle);
                ElMessage.success('保存成功');
            }

            // 8. 重置表单并关闭抽屉
            drawer.value = false;
            formModel.value = { ...defaultForm };
            imageUrl.value = '';
        } else {
            // 后端返回业务错误（如分类不存在、字段重复）
            ElMessage.error(`操作失败：${res.data.msg || '未知错误'}`);
        }
    } catch (err) {
        // 捕获网络错误（如断网、超时）或接口抛出的异常
        console.error('接口调用失败：', err);
        ElMessage.error('操作失败：网络异常或接口错误');
    } finally {
        // 无论成功失败，都关闭加载状态
        loading.value = false;
    }
};

defineExpose({ open });
</script>

<template>
    <el-drawer 
        v-model="drawer" 
        :title="formModel.id ? '编辑作品' : '添加作品'" 
        size="70%"
        destroy-on-close
        :before-close="() => !loading" 
    >
        <el-form 
            :model="formModel" 
            ref="formRef" 
            label-width="80px"
        >
            <el-form-item label="小说标题">
                <el-input 
                    v-model="formModel.title" 
                    placeholder="请输入小说标题"
                    :disabled="loading" 
                ></el-input>
            </el-form-item>
            
            <el-form-item label="小说分类">
                <ChannelSelect 
                    :options="props.options" 
                    v-model="formModel.cate_id"
                    :disabled="loading"
                ></ChannelSelect>
            </el-form-item>
            
            <!-- 状态选择 -->
            <el-form-item label="作品状态">
                <el-radio-group v-model="formModel.state" :disabled="loading">
                    <el-radio 
                        v-for="option in statusOptions" 
                        :key="option.value" 
                        :label="option.value"
                        :disabled="!isEditMode && option.value !== '待审核'"
                    >
                        {{ option.label }}
                    </el-radio>
                </el-radio-group>
                <div v-if="!isEditMode" class="status-hint">
                    新作品默认状态为"待审核"，编辑时可修改状态
                </div>
            </el-form-item>
            
            <el-form-item label="小说封面">
                <el-upload 
                    class="avatar-uploader" 
                    :show-file-list="false" 
                    :on-change="onSelectFile"
                    accept="image/*"
                    :auto-upload="false"
                    :disabled="loading"
                    name="cover"
                >
                    <div class="upload-container">
                        <!-- 修复：取消注释，确保 v-if 和 v-else 正确配对 -->
                        <img 
                            v-if="imageUrl" 
                            :src="imageUrl" 
                            class="preview-img" 
                            alt="文章封面"
                        >
                        <el-icon v-else class="upload-plus-icon"><Plus /></el-icon>
                        <el-button 
                            v-if="imageUrl"
                            type="text" 
                            class="remove-btn" 
                            @click.stop="removeImage"
                            :disabled="loading"
                        >
                            删除
                        </el-button>
                    </div>
                </el-upload>
                <div class="upload-hint">支持JPG、PNG格式，大小不超过2MB（完整显示无裁剪）</div>
            </el-form-item>
            
            <el-form-item label="作品简介">
                <div class="editor-container">
                    <quill-editor 
                        ref="quillRef"
                        v-model:content="formModel.content"
                        content-type="html" 
                        theme="snow"
                        :options="{
                            placeholder: '请输入作品简介...',
                            modules: {
                                toolbar: [
                                    ['bold', 'italic', 'underline', 'strike'],
                                    [{ 'header': [1, 2, 3, false] }],
                                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                                    [{ 'align': [] }],
                                    ['link', 'image']
                                ]
                            }
                        }"
                        :disabled="loading"
                    />
                </div>
            </el-form-item>
            
            <el-form-item>
                <el-button 
                    type="primary" 
                    @click="onPublish"
                    :loading="loading" 
                >
                    {{ isEditMode ? '保存修改' : '发布作品' }}
                </el-button>
                <el-button 
                    @click="drawer = false" 
                    style="margin-left: 10px;"
                    :disabled="loading"
                >
                    取消
                </el-button>
            </el-form-item>
        </el-form>      
    </el-drawer> 
</template>

<style scoped>
.upload-container {
  width: 200px;
  height: 300px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s;
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
}

.upload-container:hover {
  border-color: #4096ff;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.upload-plus-icon {
  font-size: 24px;
  color: #86909c;
}

.remove-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 4px 0;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.upload-container:hover .remove-btn {
  opacity: 1;
}

.upload-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #86909c;
}

.editor-container {
  width: 100%;
  min-height: 300px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.el-form-item:last-child {
  margin-top: 20px;
}

.status-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  font-style: italic;
}

/* 状态标签样式 */
:deep(.el-radio) {
  margin-right: 16px;
}

:deep(.el-radio.is-disabled) {
  color: #c0c4cc;
  cursor: not-allowed;
}

:deep(.el-radio.is-disabled .el-radio__label) {
  color: #c0c4cc;
}
</style>